<template>
  <!-- 服务记录 -->
  <view>
    <view>
      <view v-for="(item, index) in list" :key="index" class="nav" @tap="goPage">
        <view class="acea-row row-between goods-total">
          <text class="title">预约日期</text>
          <text class="num">2023-02-01</text>
        </view>
        <view class="acea-row row-between goods-total">
          <text class="title">预约药品</text>
          <view class="num" style="text-align: right">
            <view style="margin-bottom: 10rpx">安诗婷(北伐主单坑注射液)*5盒</view>
            <view>15mg*5片</view>
          </view>
        </view>
        <view class="acea-row row-between goods-total" style="align-items: center">
          <text class="title">预约状态</text>
          <view class="num" style="display: flex" @tap.stop.prevent>
            <u--text type="error" size="24" text="已拒绝"></u--text>
            <u-button text="取消预约" type="primary" @click="visible = true" size="mini"></u-button>
          </view>
        </view>
        <view class="acea-row row-between goods-total" v-if="item.state === 1">
          <text class="title">拒绝原因</text>
          <text class="num">就是不给退</text>
        </view>
      </view>
    </view>
    <u-modal
      :show="visible"
      title="提示"
      content="确定取消此条预约吗"
      @cancel="visible = false"
      @confirm="cancel"
      :showCancelButton="true"
    ></u-modal>
  </view>
</template>

<script>
import { list } from '@/api/demo'
import { test } from '@/api/user'
import { mixinGetList } from '@/utils/mixins'
export default {
  mixins: [mixinGetList],
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    test().then((res) => {
      debugger
    })
  },
  methods: {
    getList(isRefresh) {
      uni.showLoading({ title: '数据加载中...' })
      list({
        ...this.pageOption
      })
        .then((res) => {
          this.mixinFormatRes(
            res,
            (v) => ({
              ...v,
              state: 1,
              imgUrl: v.img // 主要是格式化列表字段，比如时间、图片链接、转换的统一处理
            }),
            isRefresh
          )
        })
        .finally(() => {
          uni.hideLoading()
          uni.stopPullDownRefresh()
        })
    },
    goPage() {
      uni.navigateTo({
        url: '/homePages/appoint/detail'
      })
    },
    cancel() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  margin: 20rpx auto 40rpx auto;
  display: flex;
  flex-direction: column;
  padding: 35rpx;
  box-shadow: 0px 0px 4px 0px rgba(242, 117, 96, 0.1);
  border-radius: 20rpx;
  background-color: #fff;
  width: 690rpx;
  .goods-total {
    margin: 20upx 0;
    line-height: 25upx;
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 26upx;
      color: #333333;
    }

    .num {
      font-size: 26upx;
      color: #999999;
      ::v-deep .u-button {
        margin-left: 10rpx;
        width: 60px !important;
      }
    }
  }
}
</style>
